import React from 'react';
import ReactDOM from 'react-dom';
import {Provider,connect} from 'react-redux'
import store from './store'
// Provider 用来吧跟组件包裹起来 并且给Provider传递一个store属性
//   store属性对应的值就是  我们刚才掺上的那个store
//   Provider这个组件一个项目只用一次既可以了

//connect 给对应的组件提供store中的数据的，
//哪个组件想用redux中的数据 ，这个组件就需要用connect处理一下
console.log(store.getState())
// store 中的 dispatch 这个方法使用来更改state中的数据的
// getState 就是为了获取 state中的数据的
// subscribe

class Counter extends React.Component{
  add=(dispatch,getState)=>{
    console.log(getState())
    setTimeout(() => {
      dispatch({type:"ADD",qqq:20})
    }, 2000);
  }
  render(){
    return <>
      <h1>当前数字是{this.props.count}</h1>
      <button onClick={()=>{this.props.dispatch(this.add)}}>+</button>
      </>
  }
}


Counter = connect((state)=>({count:state.myCount.num}),(dispatch)=>({dispatch}))(Counter)

class TODO extends React.Component{
  state = {
    todo:''
  }
  render(){
    let {list,dispatch} = this.props;
    return <>
      <input 
        type="text" 
        value={this.state.todo} 
        onChange={(e)=>{this.setState({todo:e.target.value})}}
        onKeyDown={(e)=>{
          if(e.keyCode===13){
            let str = this.state.todo;
            this.state.todo = ''
            dispatch({type:"ADDTODO",option:{id:Math.random(),str:str}})
          }
          }
        }  
        />
      <ul>
        {
          list.map(item=><li key={item.id}>{item.str} <button onClick={()=>{dispatch({type:"MINUSTODO",id:item.id})}}>X</button></li>)
        }
      </ul>
    </>
  }
}
TODO = connect((state)=>({list:state.myTodo.todoList}),(dispatch)=>({dispatch}))(TODO)



class App extends React.Component {

    render() {
        let {color123,dispatch} = this.props;
        return <div className='' style={{color:color123}}>
            哈哈哈
            <Counter/>
            <button onClick={()=>{dispatch({type:"MINUS",num:5})}}>-</button>

            <TODO/>
        </div>;
    }
}
App = connect((state)=>({
  color123:state.myCount.color
}),(dispatch)=>({dispatch}))(App)

ReactDOM.render(<Provider store={store}>
  <App/>
</Provider>,document.getElementById('root'))